<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css">
    <style>
        .line-t{
            text-decoration: line-through;
            color: #ccc;
        }
    </style>
    <script src="../assets/js/vue.js"></script>
</head>

<body>
    <div id="app" class="container">
        <div class="row justify-content-sm-center mt-3">
            <div class="col-sm-6 card bg-light">
                <div class="card-body">
                    <form>
                        <div class="form-group">
                            <label for="time">任务时间</label>
                            <input type="date" class="form-control" id="time" v-model="time">
                        </div>
                        <div class="form-group">
                            <label for="info">任务内容</label>
                            <textarea class="form-control" id="info" v-model="content"></textarea>
                        </div>
                        <div class="form-group input-group">
                            <div class="input-group-prepend">
                                <label class="input-group-text " for="level" :class="grade" ></label>
                            </div>
                            <select class="custom-select" id="level" v-model="grade">
                                <option value="" disabled>等级选择</option>
                                <option value="bg-danger">任务等级-A</option>
                                <option value="bg-warning">任务等级-B</option>
                                <option value="bg-primary">任务等级-C</option>
                                <option value="bg-success">任务等级-D</option>
                                <option value="bg-info">任务等级-E</option>
                            </select>
                        </div>
                        <button type="button" class="btn btn-primary btn-block" @click="pushContent()">添加</button>
                    </form>
                </div>
            </div>
        </div>
        <div class="row mt-3 p-3 border rounded bg-light">
            <div class="col-sm" style="text-align: center;" v-if="arr.length==0">暂无任务</div>
            <template v-else>
                <div class="col-sm-4 p-3"  v-for="(value,index) in arr" >
                    <div class="card">
                        <div class="card-header " :class="value.grade"></div>
                        <div class="card-body">
                            <h6 :class=" status.includes(index)? 'line-t':''">
                                {{value.time}}
                                <input type="checkbox" style="float: right;"  v-model="status"  :value="index" >
                            </h6>
                            <p :class=" status.includes(index)? 'line-t':''"> {{value.content}}</p>
                        </div>
                        <div class="card-footer" style="text-align: right;">
                            <button type="button" class="btn btn-secondary btn-sm">
                                <i class="bi bi-search"></i>
                            </button>
                            <button type="button" class="btn btn-secondary btn-sm">
                                <i class="bi bi-trash-fill" @click="removeContent(index)"></i>
                            </button>
                        </div>
                    </div>
                </div>
                <!-- <div class="col-sm-4 p-3" >
                    <div class="card">
                        <div class="card-header bg-success"></div>
                        <div class="card-body line-t">
                            <h6>
                                2021-01-12
                                <input type="checkbox" style="float: right;" checked>
                            </h6>
                            <p>任务描述</p>
                        </div>
                        <div class="card-footer" style="text-align: right;">
                            <button type="button" class="btn btn-secondary btn-sm">
                                <i class="bi bi-search"></i>
                            </button>
                            <button type="button" class="btn btn-secondary btn-sm">
                                <i class="bi bi-trash-fill"></i>
                            </button>
                        </div>
                    </div>
                </div> -->
            </template>

        </div>
    </div>
</body>
    <script>
        new Vue({
            el:"#app",
            data:{
                time:"",
                content:"",
                grade:"",
                arr:[],
                status:[]
            },
            methods:{
                pushContent(){
                    if(this.time&&this.content&&this.grade){
                    var  detail={
                    time:this.time,
                    content:this.content,
                    grade:this.grade
                    };
                    this.arr.push(detail)
                    }else{
                        alert("请将内容输入完整")
                    }
                },
                removeContent(i){
                    this.arr.splice(i,1);
                }
            }
        })
    </script>
</html>